<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="demo">
            <div class="container">
                <i class="iconfont icon-leftarrow cfff" id="goBack"></i>
                <div class="badge-top">
                    <div class="my-badge">
                        <h3 class="cfff mt16">我的徽章</h3>
                        <h4 class="cfff mt8">MY BADGES</h4>
                    </div>
                    <p>
                        <span>今日排名</span>
                        <span id="ranking"></span>
                    </p>
                </div>
            </div>
        </div>

        <div class="badge-main">
            <div class="container badge-content">
                <div class="continuity">
                    <a href="#"><img src="../../assets/imgs/mybadge01.jpg" alt=""></a>
                    <span>连续训练天数</span>
                </div>
                 <div class="accumulate">
                    <a href="#"><img src="../../assets/imgs/mybadge02.jpg" alt=""></a>
                    <span>累积训练天数</span>
                </div>
                <div class="train">
                    <a href="#"><img src="../../assets/imgs/mybadge03.jpg" alt=""></a>
                    <span>训练次数</span>
                </div>
                <div class="run">
                    <a href="#"><img src="../../assets/imgs/mybadge04.jpg" alt=""></a>
                    <span>跑步次数</span>
                </div>
                <div class="ride">
                    <a href="#"><img src="../../assets/imgs/mybadge05.jpg" alt=""></a>
                    <span>骑行次数</span>
                </div>
                <div class="star">
                    <a href="#"><img src="../../assets/imgs/mybadge06.jpg" alt=""></a>
                    <span>明星圈友</span>
                </div>
                <div class="comment">
                    <a href="#"><img src="../../assets/imgs/mybadge07.jpg" alt=""></a>
                    <span>评论达人</span>
                </div>
                <div class="continuity">
                    <a href="#"><img src="../../assets/imgs/mybadge08.jpg" alt=""></a>
                    <span>运动铁粉</span>
                </div>
                <div class="more">
                    <img src="../../assets/imgs/mybadge09.jpg" alt="">
                </div> 
            </div>
        </div>
    </main>
</body>

</html>
